{% extends 'admin_panel/base.html' %}

{% block title %}{{ travel.title }} - 旅行记录详情{% endblock %}
{% block page_title %}旅行记录详情{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <!-- 基本信息卡片 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">基本信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>标题：</strong>{{ travel.title }}</p>
                        <p><strong>用户：</strong>{{ travel.user.username }}</p>
                        <p><strong>位置：</strong>
                            {% if travel.location %}
                            {{ travel.location }}
                            {% else %}
                            <span class="text-muted">未设置</span>
                            {% endif %}
                        </p>
                        <p><strong>经纬度：</strong>
                            {% if travel.latitude and travel.longitude %}
                            {{ travel.latitude }}, {{ travel.longitude }}
                            {% else %}
                            <span class="text-muted">未设置</span>
                            {% endif %}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>开始日期：</strong>{{ travel.start_date }}</p>
                        <p><strong>结束日期：</strong>
                            {% if travel.end_date %}
                            {{ travel.end_date }}
                            {% else %}
                            <span class="text-muted">未设置</span>
                            {% endif %}
                        </p>
                        <p><strong>创建时间：</strong>{{ travel.created_at|date:"Y-m-d H:i" }}</p>
                        <p><strong>更新时间：</strong>{{ travel.updated_at|date:"Y-m-d H:i" }}</p>
                    </div>
                </div>
                
                <!-- 描述 -->
                {% if travel.description %}
                <div class="mt-3">
                    <strong>描述：</strong>
                    <div class="border rounded p-3 mt-2 bg-light">
                        {{ travel.description|linebreaks }}
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 图片展示 -->
        {% if travel.images %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">图片 ({{ travel.images|length }})</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for image_url in travel.images %}
                    <div class="col-md-4 mb-3">
                        <div class="card position-relative">
                            <img src="{{ image_url }}" class="card-img-top" alt="旅行图片" style="height: 200px; object-fit: cover;">
                            {% if travel.main_image_index == forloop.counter0 %}
                            <div class="position-absolute top-0 end-0 m-2">
                                <span class="badge bg-primary">
                                    <i class="bi bi-star-fill me-1"></i>主图
                                </span>
                            </div>
                            {% endif %}
                            <div class="card-body text-center">
                                <a href="{{ image_url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-zoom-in"></i> 查看原图
                                </a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col-md-4">
        <!-- 操作面板 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">操作</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'admin_panel:admin_travel_edit' travel.pk %}" class="btn btn-primary">
                        <i class="bi bi-pencil me-2"></i>编辑记录
                    </a>
                    <form method="post" action="{% url 'admin_panel:admin_travel_delete' travel.pk %}" 
                          onsubmit="return confirmDelete('确定要删除这条旅行记录吗？此操作将同时删除所有关联的图片文件。')">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger w-100">
                            <i class="bi bi-trash me-2"></i>删除记录
                        </button>
                    </form>
                    <a href="{% url 'admin_panel:admin_travel_list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>返回列表
                    </a>
                </div>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">统计信息</h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        评论数量
                        <span class="badge bg-primary rounded-pill">{{ travel.comments.count }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        点赞数量
                        <span class="badge bg-success rounded-pill">{{ travel.likes.count }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        图片数量
                        <span class="badge bg-info rounded-pill">{{ travel.images|length }}</span>
                    </div>
                </div>
                
                {% if travel.comments.exists %}
                <div class="mt-3">
                    <strong>最新评论：</strong>
                    <div class="mt-2">
                        {% for comment in travel.comments.all|slice:":3" %}
                        <div class="border-bottom pb-2 mb-2">
                            <small class="text-muted">{{ comment.user.username }} - {{ comment.created_at|date:"m-d H:i" }}</small>
                            <p class="mb-0 small">{{ comment.content|truncatewords:10 }}</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
